<template>
	<div style="width: 150%;">
		<p class="pageTitle">请下载导入模板，填写全部校教务数据后导入，模板样式如下：<i style="color: skyblue;cursor: pointer;">点击下载模板文件</i></p>
		<table class="table table-condensed pageTitle">
			<thead>
				<tr style="background-color: darkgray;">
					<th>序号</th>
					<th>课程编号</th>
					<th>课程名称</th>
					<th>总学时</th>
					<th>学分</th>
					<th>所属院系</th>
					<th>课程类别</th>
					<th>考试方式</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<label>
							<input type="checkbox">1
						</label>
					</td>
					<td>kb5231</td>
					<td>《论语导读》</td>
					<td>75</td>
					<td>8</td>
					<td>文学院</td>
					<td>必修</td>
					<td>考试</td>
				</tr>
			</tbody>
		</table>
		<!-- 上传文件导入 -->
		<div style="margin-left: 50px">
			<el-upload class="upload-demo" action="http://localhost:8080/axios/course/import" :on-change="handleChange"
				:file-list="fileList">
				<el-button size="small" type="primary">点击上传</el-button>
				<div slot="tip" class="el-upload__tip">只能上传小于2k的文件</div>
			</el-upload>
		</div>
		<br /><br />
		<p class="pageTitle">上传正常数据 1392条，异常数据 203 条。您可下载异常数据，调整后再将其导入。
			<i class="err">下载异常数据文件</i>
		</p>
		<p class="pageTitle">导入后课程信息更新如下，请确认无误后点击"导入课程信息"按钮。</p>
		<br />
		<div>
			<table class="table table-condensed pageTitle">
				<thead>
					<tr>
						<th>序号</th>
						<th>课程编号</th>
						<th>课程名称</th>
						<th>总学时</th>
						<th>学分</th>
						<th>所属院系</th>
						<th>课程类别</th>
						<th>考试分数</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<label>
								<input type="checkbox">1
							</label>
						</td>
						<td>kb5231</td>
						<td>《论语导读》</td>
						<td>75</td>
						<td>8</td>
						<td>文学院</td>
						<td>必修</td>
						<td>考试</td>
						<td>
							<a>删除</a>
						</td>
					</tr>
					<tr>
						<td>
							<label>
								<input type="checkbox">1
							</label>
						</td>
						<td>kb5231</td>
						<td>《论语导读》</td>
						<td>75</td>
						<td>8</td>
						<td>文学院</td>
						<td>必修</td>
						<td>考试</td>
						<td>
							<a>删除</a>
						</td>
					</tr>
					<tr>
						<td>
							<label>
								<input type="checkbox">1
							</label>
						</td>
						<td>kb5231</td>
						<td>《论语导读》</td>
						<td>75</td>
						<td>8</td>
						<td>文学院</td>
						<td>必修</td>
						<td>考试</td>
						<td>
							<a>删除</a>
						</td>
					</tr>
					<tr>
						<td>
							<label>
								<input type="checkbox">1
							</label>
						</td>
						<td>kb5231</td>
						<td>《论语导读》</td>
						<td>75</td>
						<td>8</td>
						<td>文学院</td>
						<td>必修</td>
						<td>考试</td>
						<td>
							<a>删除</a>
						</td>
					</tr>
					<tr>
						<td>
							<label>
								<input type="checkbox">1
							</label>
						</td>
						<td>kb5231</td>
						<td>《论语导读》</td>
						<td>75</td>
						<td>8</td>
						<td>文学院</td>
						<td>必修</td>
						<td>考试</td>
						<td>
							<a>删除</a>
						</td>
					</tr>
					<tr>
						<td>
							<label>
								<input type="checkbox">1
							</label>
						</td>
						<td>kb5231</td>
						<td>《论语导读》</td>
						<td>75</td>
						<td>8</td>
						<td>文学院</td>
						<td>必修</td>
						<td>考试</td>
						<td>
							<a>删除</a>
						</td>
					</tr>
					<tr>
						<td>
							<label>
								<input type="checkbox">1
							</label>
						</td>
						<td>kb5231</td>
						<td>《论语导读》</td>
						<td>75</td>
						<td>8</td>
						<td>文学院</td>
						<td>必修</td>
						<td>考试</td>
						<td>
							<a>删除</a>
						</td>
					</tr>
					<tr>
						<td>
							<label>
								<input type="checkbox">
								<span style="">1</span>
							</label>
						</td>
						<td>kb5231</td>
						<td>《论语导读》</td>
						<td>75</td>
						<td>8</td>
						<td>文学院</td>
						<td>必修</td>
						<td>考试</td>
						<td>
							<a>删除</a>
						</td>
					</tr>
				</tbody>
			</table>
			<!-- 文件导出 -->
			<button class="btn btn-default pageTitle daoru" @click="downloadEvt">导出</button>
		</div>
	</div>
</template>

<script>
	import {download} from '../hooks/filedownload.js'

	export default {
		name: 'Up',
		data() {
			return {
				fileList: [{
					name: '测试文件',
					url: '',
				}]
			};
		},
		methods: {
			handleChange(file, fileList) {
				console.log(file)
				this.fileList.name = file.name
				this.fileList.url = 'http://localhost:8888/axios/upload/' + file.url
				this.fileList = fileList.slice(-3);
			},
			downloadEvt() {
				download();
			}
		}
	}
</script>

<style>
	.daoru {
		width: 90px;
		height: 30px;
		background-color: deepskyblue;
	}

	.err {
		color: red;
		cursor: pointer;
	}
</style>
